<template>
  <div>
    <el-dialog
        title="文件上传"
        :visible.sync="dialogVisible"
        width="60%"
        style="text-align: center;"
        :before-close="handleClose">
        <el-upload
            class="upload-demo"
            ref="upload"
            drag
            action="doUpload"
            :limit="1"
            :file-list="fileList"
            :before-upload="beforeUpload"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xls、xlsx文件，且不超过100MB</div>
            <div  slot="tip" style="margin-top:10px">{{ fileName }}</div>
        </el-upload> 
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitUpload()"g>提 交</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            fileList:[],
            fileName:''
        }
    },
    props: {  
        dialogVisible: {  
            type: Boolean,  
            default: false  
        }  
    },  
    methods:{
        handleClose(){
            this.$emit('close')
        },
        beforeUpload(file){ // 上传前 文件校验
            this.files = file;
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            const isLt100M = file.size / 1024 / 1024 < 100
            if (!extension && !extension2) {
              this.$message.warning('上传文件只能是 xls、xlsx格式!')
              return
            }
            if (!isLt100M) {
              this.$message.warning('上传文件大小不能超过 100MB!')
              return
            }
            this.fileName = file.name;

            console.log('文件',this.files);
            
            return false // 返回false不会自动上传
      },
      submitUpload() { // 确认上传

        if(this.fileName == ""){
            this.$message({
                message:'请选择要上传的文件！',
                type:'warning',
                showClose:true
            })
            return false;
        }
        this.$confirm('注意：导入的文件需要根据模板进行导入，如果不是模板，那么可能会导致数据错误', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            let formData = new FormData()
            formData.append('file', this.files);  
            // 如果你还想发送额外的字段，比如文件名或其他信息，可以这样添加  
            formData.append('fileName', this.fileName);  
            axios({
                url: 'http://localhost:8081/file/excel',
                method: 'POST',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                processData: false,
                data: formData
            }).then(res=>{
               setTimeout(()=>{
                    this.$notify.success('增加成功')
                    this.$emit('close')
                    loading.close()
               },2000)
            }).catch(err=>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
    }
}
</script>

<style>

</style>